<template>
  <div>
    <div style="width: 40%; margin-left: 20%; padding-top: 10px; display: flex">
      <el-input v-model="name" placeholder="请输入模板名" style="width: 30%" />
    </div>
    <div style="width: 80%; margin-left: 20%; margin-top: 30px">
      <div>
        <div v-for="iteme in examInfos" :key="iteme.type_name">
          <span v-if="iteme.type_item.length > 0">{{ iteme.type_name }}</span>
          <div
            v-for="(items, index) in iteme.type_item"
            :key="items.id"
            style="margin-top: 10px"
          >
            <el-input
              v-model="items.item_name"
              :disabled="true"
              style="width: 30%"
            />
            <!-- <el-input
              v-if="
                items.data_type == 'input_str_r' ||
                items.data_type == 'input_radio'
              "
              :disabled="true"
              style="width: 30%"
            />
            <span>
              <el-input
                v-if="items.data_type == 'input_str_w'"
                v-model="items.value"
                style="width: 30%"
              />
            </span> -->
            <el-input
              v-if="items.data_type == 'input_str_w'"
              v-model="items.value"
              placeholder="请输入描述"
              style="width: 30%"
            />
            <el-input v-else :disabled="true" style="width: 30%" />

            <span>
              <el-button @click="del(iteme, items, index)">删除</el-button>
            </span>
            <span style="margin-left: 10px">
              <el-tag type="success">已添加</el-tag>
            </span>
          </div>
        </div>
      </div>
      <div style="margin-left: 20%; margin-top: 10px">
        <!-- <el-button @click="Submit">保存</el-button> -->
      </div>
      <!-- ------------------------------------->
      <div v-for="item in result" :key="item.id">
        <span v-if="item.type_item.length > 0">{{ item.type_name }}</span>
        <div
          v-for="items in item.type_item"
          :key="items.name"
          style="margin-top: 10px"
        >
          <el-input
            v-model="items.item_name"
            :disabled="true"
            style="width: 30%"
          />
          <!-- <el-input
            v-if="
              items.data_type == 'input_str_r' ||
              items.data_type == 'input_radio'
            "
            :disabled="true"
            style="width: 30%"
          />
          <span>
            <el-input
              v-if="items.data_type == 'input_str_w'"
              v-model="items.input"
              style="width: 30%"
            />
          </span> -->
          <el-input
            v-if="items.data_type == 'input_str_w'"
            v-model="items.value"
            placeholder="请输入描述"
            style="width: 30%"
          />
          <el-input v-else :disabled="true" style="width: 30%" />
          <span>
            <el-button @click="addexamInfos(items, item)">添加</el-button>
          </span>
          <span style="margin-left: 10px">
            <el-tag type="info">未添加</el-tag>
          </span>
        </div>
      </div>
    </div>
    <div style="margin-left: 40%; margin-top: 30px">
      <el-button @click="goBack()">返回</el-button>
    </div>
  </div>
</template>

<script>
  import {
    templateEdit,
    templateAdd,
    templateSingleDel,
    templateSingleAdd,
  } from '@/api/template'

  export default {
    components: {},
    props: {
      reportgroupid: {
        type: Number,
        required: true,
      },
      ids: {
        type: Number,
        required: true,
      },
      reportid: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        flag: 0,
        examInfos: [],
        name: '',
        result: [],
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      // 初始化 方法 20200425 z
      init() {
        const params = {
          id: this.reportgroupid,
          group_id: this.reportid,
        }
        templateEdit(params).then((e) => {
          this.name = e.data.template_name
          //
          this.examInfos = e.data.type_arr
          this.result = e.data.not_type_arr
        })
      },
      // 删除
      del(r, e) {
        const params = {
          item_id: e.item_id,
          type_id: r.type_id,
          template_incr_id: this.reportgroupid,
        }
        templateSingleDel(params).then(() => {
          this.init()
        })
      },
      // 添加
      addexamInfos(e, r) {
        console.log(e)
        const params = {
          item_id: e.item_id,
          type_id: r.id,
          template_incr_id: this.reportgroupid,
          template_name: this.name,
          report_value: e.value,
        }
        templateSingleAdd(params).then(() => {
          this.init()
        })
      },
      // 提交
      Submit() {
        const arr = []
        this.examInfos.forEach((e) => {
          arr.push({
            id: e.id,
            type_item: [],
          })
          e.type_item.forEach((j) => {
            arr.forEach((i) => {
              if (j.type_id == i.id) {
                i.type_item.push({
                  id: j.item_id,
                  value: j.value || null,
                })
              }
            })
          })
        })
        const params = {
          template_name: this.name,
          type_infos: JSON.stringify(arr),
          user_id: this.ids,
          group_id: this.reportgroupid,
        }
        templateAdd(params).then(() => {
          // this.init()
          this.goBack()
        })
      },
      // 新建
      build() {
        this.flag = 1
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
    },
  }
</script>

<style></style>
